<h1>更新资源管理 api-asset/:id/edit</h1>
<form action='/admin/api-asset/{{asset.id}}/edit' method='POST' id="formObj">
  <!--  原生的method没有put请求，添加一个input type hidden设置put-->
  <input type='hidden' name='_method' value='PUT' />
  <div class='mb-3'>
    <label for='name' class='form-label'>资源名称</label>
    <input
      type='text'
      class='form-control'
      id='name'
      name='name'
      value='{{asset.name}}'
      placeholder='请输入资源名称'
    />
  </div>
  <div class='mb-3'>
    <label for='type' class='form-label'>资源类型</label>
    <div>
      <div class='form-check form-check-inline'>
        <input
          class='form-check-input'
          type='radio'
          {{equal asset.type 'module' 'checked'}}
          value='module'
          name='type'
          id='type1'
        />
        <label class='form-check-label' for='type1'>
          模块
        </label>
      </div>
      <div class='form-check form-check-inline'>
        <input
          class='form-check-input'
          type='radio'
          {{equal asset.type 'menu' 'checked'}}
          value='menu'
          name='type'
          id='menu1'
        />
        <label class='form-check-label' for='menu1'>
          菜单
        </label>
      </div>
      <div class='form-check form-check-inline'>
        <input
          class='form-check-input'
          type='radio'
          {{equal asset.type 'feature' 'checked'}}
          value='feature'
          name='type'
          id='feature1'
        />
        <label class='form-check-label' for='feature1'>
          功能
        </label>
      </div>
    </div>
  </div>
  <div class='mb-3'>
    <label for='url' class='form-label'>资源地址</label>
    <input
      type='text'
      class='form-control'
      id='url'
      name='url'
      value='{{asset.url}}'
      placeholder='请输入资源地址'
    />
  </div>
  <div class='mb-3'>
    <label for='description' class='form-label'>资源描述</label>
    <textarea
      type='text'
      class='form-control'
      id='description'
      name='description'
      placeholder='请输入资源地址'
    >{{asset.description}}</textarea>
  </div>
  <div class='mb-3'>
    <label for='_parentId' class='form-label'>父级</label>
    <div data-bs-toggle='modal' class="custom-parent-el" data-bs-target='#myModal'>
      <span  class="custom-parent-el-text"></span>
      <input
        style='pointer-events: none;'
        type='text'
        class='form-control'
        id='_parentId'
        value='{{asset.parentId}}'
        placeholder='点击选择父级'
        disabled
      />
    </div>
  </div>
  <div class='mb-3'>
    <label for='status' class='form-label'>启用状态</label>
    <div>
      <div class='form-check form-check-inline'>
        <input
          class='form-check-input'
          type='radio'
          {{equal asset.status 1 'checked'}}
          value='1'
          name='status'
          id='status1'
        />
        <label class='form-check-label' for='status1'>
          有效
        </label>
      </div>
      <div class='form-check form-check-inline'>
        <input
          class='form-check-input'
          type='radio'
          value='0'
          {{equal asset.status 0 'checked'}}
          name='status'
          id='status0'
        />
        <label class='form-check-label' for='status0'>
          无效
        </label>
      </div>
    </div>
  </div>
  <div class='mb-3'>
    <label for='sort' class='form-label'>排序编号</label>
    <input
      type='number'
      class='form-control'
      id='sort'
      name='sort'
      value='{{asset.sort}}'
      placeholder='列表排序值'
    />
  </div>
  <div style='display: flex;justify-content: center'>
    <button type='submit' class='btn btn-primary'>更新</button>
  </div>
  <div class='modal' id='myModal' tabindex='-1'>
    <div class='modal-dialog modal-lg'>
      <div class='modal-content'>
        <div class='modal-header'>
          <h5 class='modal-title'>选择父级</h5>
          <button
            type='button'
            class='btn-close'
            data-bs-dismiss='modal'
            aria-label='Close'
          ></button>
        </div>
        <div class='modal-body'>
          <ul class="list-group">
            {{#each assetTree}}
              {{#if ../asset.parent}}
                {{> tree-node this depth=0 upid=(defaultValue ../asset.parent.id)}}
              {{else}}
                {{> tree-node this depth=0 upid=""}}
              {{/if}}
            {{/each}}
          </ul>
        </div>
        <div class='modal-footer'>
          <button
            type='button'
            class='btn btn-secondary'
            data-bs-dismiss='modal'
          >关闭</button>
          <button type='button' class='btn btn-primary' id="modalSubmit" data-bs-dismiss='modal'>确定</button>
        </div>
      </div>
    </div>
  </div>
</form>


<script>
  const modalSubmit = document.getElementById('modalSubmit');
  function clickFn(){
    const formObj = document.getElementById('formObj');
    let parentModalInfo = document.querySelector(`.tree-select-item[data-id='${formObj.parentId.value}']`);
    let parentTextEl = document.querySelector('.custom-parent-el-text');
    if(!parentModalInfo) return;
    const {type,url,name,id} = parentModalInfo.dataset;
    parentTextEl.innerHTML = `
    <span class="badge bg-primary">${id}</span>
    <span class="badge bg-info">${type}</span>
    <span class="badge bg-secondary">${name}</span>
    <span class="badge bg-success">${url}</span>
    `
    document.querySelector('#_parentId').value = id;
  }
  modalSubmit.onclick = clickFn
  window.onload = () => {
    clickFn();
  }
</script>

<style>
  .custom-parent-el{
    position: relative;
  }
  .custom-parent-el-text{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
  }
  .custom-parent-el-text .badge{
    margin-right: 0.5rem;
  }
  #parentId{
    color: transparent !important;
  }
</style>